<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
			div#circle{
				width: 400px;
				height: 400px;
				border: 1px solid red;
				border-radius: 50%;
				/*边框阴影 box-shadow 属性*/
				box-shadow:5px 5px 50px 50px red inset;
				}
				/*练习：1.圆形  2.正三角形
				思路1：宽高与边框倒角一致
				思路2：div#triangle   css中 抓到div 左边框 50像素实线红色
				                             右边框 50像素实线黄色
															下边框 50像素实线黑色
				     注意：先别加宽高 transparent 透明色
				*/
			div#triangle{
				width: 0;
				border-left: 50px solid transparent;
				border-right: 50px solid transparent;
				border-bottom: 50px solid black;
				/*两行 倒三角 蓝色 透明度 .3
				提醒：所有边框：50px solid transparent
				上边框颜色改成蓝色 0，0，225*/
				border: 50px solid transparent;
				border-top-color: rgba(0,0,225,.3);
				}
				/*outline 边框轮廓 只针对input 元素*/
				input{
					outline:1px solid red;
				}
				/*实际应用 通配选择器 去掉轮廓
				*{ outline：0;}
				
				*/
			</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		边框：<input type="text">
	</body>
</html>